<template>
  <div class="hot-guide">
    <my-title titleName="向导推荐" moreLink="/guideList"></my-title>

    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item, index) in guideList" :key="index">
        <router-link :to="'/personal/'+item.id + '/read'" tag="div">
          <my-guide :guide="item"></my-guide>
        </router-link>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
export default {
  name: "hotGuide",
  data() {
    return {};
  },
  props: ["guideList"]
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/modifyMintUIColor.styl';

.hot-guide {
  background-color #fff;
  margin-top 10px;
  .mint-swipe {
    overflow: hidden;
    height: 6rem;
    // background-color: pink;
    position: relative;
  }

  .mint-swipe>>>.mint-swipe-indicator.is-active {
    background-color: $themeColor;
    width: 16px;
    border-radius: 4px;
    opacity: 1;
  }
}
</style>